import { useState, FC } from 'react'
import { Space, Typography, Divider } from 'antd'
import { GitLogo } from '@assets/images/index'
import { useWindupString } from 'windups'
import './index.scss'
interface Props {}

const Header: FC<Props> = () => {
  const [text] = useWindupString('邱狮杰')
  const [navigationList] = useState<string[]>(['about', 'blog', 'more'])
  function navToGithub() {
    window.open('https://github.com/erqiu-sj')
  }
  return (
    <div className='header'>
      <h2 className='logo'>{text}</h2>
      <Space style={{ justifyContent: 'center' }} className='navList' split={<Divider type='vertical' />}>
        {navigationList.map((nav, navIndex) => {
          return (
            <Typography.Link key={navIndex} className='navItem fadeIns'>
              {nav}
            </Typography.Link>
          )
        })}
      </Space>
      <div className='github'>
        <img onClick={navToGithub} src={GitLogo} alt='github' />
      </div>
    </div>
  )
}

export default Header
